<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-radio-group v-model="checkedValue">
                <view class="group">
                    <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>

        <a-demo title="主题" desc="添加对应辅助类">
            <pure-radio-group v-model="checkedValue">
                <view class="group">
                    <pure-radio v-for="item in options.slice(0, 5)" :key="item.value" :label="item.label" :value="item.value" :class="`pure-radio-${item.theme}`"></pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>

        <a-demo title="禁用">
            <pure-radio-group v-model="checkedValue">
                <view class="group">
                    <pure-radio v-for="item in options.slice(0, 5)" :key="item.value" :label="item.label" :value="item.value" :class="`pure-radio-${item.theme}`" disabled></pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>

        <a-demo title="方形框" desc="添加对应辅助类">
            <pure-radio-group v-model="checkedValue">
                <view class="group">
                    <pure-radio v-for="item in options.slice(0, 5)" :key="item.value" :label="item.label" :value="item.value" :class="`pure-radio-${item.theme} pure-radio-square`"></pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>

        <a-demo title="反转" desc="位子在左，框在右，添加对应辅助类">
            <pure-radio-group v-model="checkedValue">
                <view class="group">
                    <pure-radio v-for="item in options.slice(0, 5)" :key="item.value" :label="item.label" :value="item.value" :class="`pure-radio-${item.theme}  pure-radio-reversal`"></pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>

        <a-demo title="块级布局" desc="宽度100%，添加对应辅助类">
            <pure-radio-group v-model="checkedValue">
                <pure-radio
                    v-for="item in options.slice(0, 5)"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :class="`pure-radio-${item.theme}  pure-radio-block ${item.value % 2 === 0 ? 'pure-radio-reversal' : 'pure-text-right'}`"
                ></pure-radio>
            </pure-radio-group>
        </a-demo>

        <a-demo title="异步切换" desc="手动控制选中项">
            <pure-radio-group v-model="checkedValue" async @asyncChange="handleAsyncChange">
                <view class="group">
                    <pure-radio v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></pure-radio>
                </view>
            </pure-radio-group>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 选项列表
    const options = [
        { label: "橘子", value: 1, theme: "primary" },
        { label: "苹果", value: 2, theme: "success" },
        { label: "香蕉", value: 3, theme: "danger" },
        { label: "西瓜", value: 4, theme: "warning" },
        { label: "草莓", value: 5, theme: "info" },
        { label: "葡萄", value: 6 },
        { label: "哈密瓜", value: 7 },
        { label: "榴莲", value: 8 },
        { label: "芒果", value: 9 },
        { label: "柠檬", value: 10 },
        { label: "柚子", value: 11 },
        { label: "葡萄", value: 12 },
    ];

    // 选中值
    const checkedValue = ref(1);

    // 异步切换
    function handleAsyncChange(value) {
        uni.showModal({
            title: "提示",
            content: "是否确认切换选中项？",
            success: (res) => {
                if (res.confirm) {
                    checkedValue.value = value;
                }
            },
        });
    }
</script>

<style scoped>
    :deep(.pure-radio-group) {
        width: 100%;
    }

    .group {
        display: flex;
        flex-direction: row;
        gap: 15px;
        flex-wrap: wrap;
        background: var(--pure-background-element);
        padding: 15px;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    .pure-radio-block {
        background: var(--pure-background-element);
        padding: 15px;
        border-radius: 5px;
        box-sizing: border-box;
    }
</style>
